<!-- 档案查看页面 -->
<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="4">
        <el-tabs
          v-model="activeName"
          style="background-color: white"
          type="card"
        >
          <el-tab-pane label="机构" name="zzjg">
            <el-row style="position: relative">
              <el-col
                :span="25"
                style="overflow: auto; width: 100%"
                :style="{ height: heightTree }"
              >
                <radioOrgTree @init="init" ref="dialogRadioOrgTree" />
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="查询">
            <el-row style="position: relative">
              <el-col
                :span="25"
                style="overflow: auto; width: 100%"
                :style="{ height: heightTree }"
              >
                <div :style="{ height: heightTree }">
                  <div style="width: 100%">
                    <table class="ltp-searchtable">
                      <tr @click="openChooseOrgTree()">
                        <th style="font-size: 14px">机构：</th>
                        <td>
                          <el-input
                            v-model="treeLabel"
                            readonly
                            placeholder="请选择机构"
                          />
                        </td>
                      </tr>
                      <tr style="margin-top: 10px">
                        <th style="font-size: 14px">姓名/身份证：</th>
                        <td>
                          <el-input
                            v-model="searchValue"
                            placeholder="请输入人员姓名/身份证"
                          />
                        </td>
                      </tr>
                    </table>
                  </div>
                  <div
                    style="
                      width: 100%;
                      text-align: center;
                      margin-bottom: 20px;
                      padding: 0 20px;
                    "
                  >
                    <el-button
                      type="info"
                      icon="el-icon-refresh-left"
                      style="margin-top: 5px"
                      @click="resetform()"
                      >重置</el-button
                    >
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      style="margin-top: 5px"
                      @click="init('select')"
                      >&nbsp;查询</el-button
                    >
                  </div>
                </div>
                <div style="height: 35px">
                  <div
                    style="
                      width: 100%;
                      text-align: center;
                      margin: 5px 10px 0 20px;
                    "
                  ></div>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="20">
        <vxe-table
          border
          header-align="center"
          ref="mytable"
          :loading="loading"
          highlight-current-row
          highlight-hover-row
          :height="heightY"
          :export-config="{ modes: ['current', 'selected', 'all'] }"
          :data="tableData"
          @checkbox-all="selectAllEvent"
          @checkbox-change="selectChangeEvent"
          show-overflow
        >
          <vxe-table-column
            field="xuanzhong"
            type="checkbox"
            width="60"
            align="center"
            fixed="left"
          ></vxe-table-column>
          <!-- <vxe-table-column field="xuhao" type="seq" title="序号" width="60" align="center" fixed="left"></vxe-table-column>-->
          <vxe-table-column
            type="html"
            field="xingming"
            title="姓名"
            width="100"
            align="center"
            fixed="left"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="sfzh"
            title="身份证号"
            width="200"
            align="center"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="zhiwu_jiancheng"
            title="工作单位及职务"
            width="500"
            sortable
            show-overflow
          >
            <template #default="{ row }">
              <span>{{ row.zhiwu_jiancheng }}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="csny"
            title="出生年月"
            cell-type="string"
            align="center"
            width="120"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="cjgzsj"
            title="参加工作时间"
            cell-type="string"
            align="center"
            width="160"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="qrzxl_zg"
            title="全日制教育"
            align="center"
            width="180"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="qrzxlxx_zg"
            title="毕业院校系及专业"
            align="center"
            width="300"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="zzxl_zg"
            title="在职教育"
            align="center"
            width="180"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="zzxlxx_zg"
            title="毕业院校系及专业"
            align="center"
            width="300"
            sortable
          ></vxe-table-column>
          <vxe-column title="操作" fixed="right" width="200">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="handleClickLook(scope.row)"
                size="medium"
                plain
                >浏览</el-button
              >
            </template>
          </vxe-column>
          <template #empty>
            <span style="color: #000">
              <p>暂无数据</p>
            </span>
          </template>
        </vxe-table>
        <div class="row" style="background: #fff">
          <div class="col-sm text-sm-left text-left3 pt-3">
            <vxe-pager
              background
              align="left"
              :current-page.sync="currentPage"
              :page-size.sync="pageSize"
              :total="totalResult"
              size="small"
              :page-sizes="[20, 50, 100, 500, 1000, 5000]"
              :layouts="[
                'PrevJump',
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'NextJump',
                'Sizes',
                'FullJump',
                'Total',
              ]"
              @page-change="handleSizeChange"
            >
            </vxe-pager>
          </div>
        </div>
      </el-col>
    </el-row>
    <div></div>
    <!-- 查詢的机构树 -->
    <orgChooseTree
      ref="dialogTree"
      @onModuleChoosed="onModuleChoosed"
    ></orgChooseTree>
    <browseRouter v-if="browseRouterFlag" ref="browseRouterRefs"></browseRouter>
  </div>
</template>
  <script>
import {
  getisAllow,
  getisQuery,
} from "@/api/datacentersg/achives/documentApi";
import orgChooseTree from "@/views/datacentersg/common/orgChooseTreeLazy";
import radioOrgTree from "@/views/datacentersg/common/radioOrgTreelazy";
import { getPersonByOrg } from "@/api/datacentersg/person/person";
import browseRouter from "@/views/datacentersg/archives/documentArchives/browseRouter";

import store from "@/store";

export default {
  components: {
    radioOrgTree,
    orgChooseTree,
    browseRouter,
  },
  data() {
    return {
      activeName: "zzjg",
      AS0119: "全部",
      findType: "全部",
      heightY: window.innerHeight - 170 + "px",
      heightTree: window.innerHeight - 190 + "px",
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      totalResult: 0,
      treeLabel: "",
      searchValue: "",
      selectedNode: {},
      is_contains_org_child: false,
      jg_id: "",
      loading: false,
      deptIdTree: "",
      browseRouterFlag: false,
    };
  },
  created() {
    this.init("init");
  },
  methods: {
    async init(node) {
      // console.log(node,"node");
      this.loading = true;
      this.jg_id = node.id;
      let isContainsOrgChild = "1";
      if (this.is_contains_org_child == false) {
        isContainsOrgChild = "0";
      }
      if (node === "init") {
        this.loading = false;
      } else if (node === "select") {
        let data = this.$refs.dialogRadioOrgTree.node_had.childNodes[0].data;
        // console.log(data,"data");
        this.selectedNode = {
          label: data.jg_mingcheng,
          id: data.jg_id,
          code: data.jg_bianma,
          children: [],
          parentId: data.jg_shangji,
          type: data.jg_leixing,
          icon: data.icon,
          shortName: data.jgjc,
        };
        const pattern = new RegExp("[0-9]+");
        let xingming = "";
        let sfzh = "";
        if (pattern.test(this.searchValue)) {
          sfzh = this.searchValue;
        } else {
          xingming = this.searchValue;
        }

        //判断当前用户有无权限查看'档案'
        // const deptId = node.id && this.selectedNode.id;
        let params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          data: {
            orgId: this.deptIdTree,
          },
        };
        // 有权限就让他显示，没有权限就不让他点击“浏览”操作
        getisAllow(params).then((result) => {
          if (result.resultdata == true) {
            const userInfo =
              JSON.parse(sessionStorage.getItem(`userInfo`)) || {};
            let personJsons = {
              userId: store.getters.user_id.toString(),
              token: store.getters.token.toString(),
              isEnableEditOrg: userInfo.isEnableEditOrg.toString(),
              system: "datacenter",
              is_contains_org_child: isContainsOrgChild,
              data: {
                page: this.currentPage,
                rows: this.pageSize,
                jg_id: node.id,
                xingming: this.searchValue,
                sfzh: this.searchValue,
                gllb_dm: "",
                glzt_dm: "1",
              },
            };
            getPersonByOrg(personJsons)
              .then((response) => {
                if (response.result) {
                  this.totalResult = response.resultdata.count; // 设置总记录数
                  this.tableData = response.resultdata.data; // 填充列表数据
                } else {
                  this.tableData = [];
                  this.$message.error(response.message);
                }
                this.loading = false;
              })
              .catch(() => {
                this.$message.error("内部错误！");
              });
          } else if (result.resultdata == false) {
            this.$message({
              message: "无权限查看",
              type: "warning",
            });
            this.loading = false;
          }
        });
      } else {
        //判断当前用户有无权限查看'档案'
        let params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          data: {
            orgId: node.id,
          },
        };
        // 有权限就让他显示，没有权限就不让他点击“浏览”操作
        getisAllow(params).then((result) => {
          if (result.resultdata == true) {
            const userInfo =
              JSON.parse(sessionStorage.getItem(`userInfo`)) || {};
            let personJsons = {
              userId: store.getters.user_id.toString(),
              token: store.getters.token.toString(),
              isEnableEditOrg: userInfo.isEnableEditOrg.toString(),
              system: "datacenter",
              is_contains_org_child: isContainsOrgChild,
              data: {
                page: this.currentPage,
                rows: this.pageSize,
                jg_id: node.id,
                xingming: this.searchValue,
                sfzh: this.searchValue,
                gllb_dm: "",
                glzt_dm: "1",
              },
            };
            getPersonByOrg(personJsons)
              .then((response) => {
                if (response.result) {
                  this.totalResult = response.resultdata.count; // 设置总记录数
                  this.tableData = response.resultdata.data; // 填充列表数据
                } else {
                  this.tableData = [];
                  this.$message.error(response.message);
                }
                this.loading = false;
              })
              .catch(() => {
                this.$message.error("内部错误！");
              });
          } else if (result.resultdata == false) {
            this.$message({
              message: "无权限查看",
              type: "warning",
            });
            this.loading = false;
          }
        });
      }
    },
    handleClickLook(row) {
      console.log(row,"row");
      if(row.sfzh == ""){
          this.$message({
          message: '身份证号丢失',
          type: 'warning'
          })
      }else if(row.sfzh !==""){
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          idCard: row.sfzh,
        },
      };

      getisQuery(params).then((result) => {
        if (result.resultdata == true) {
          this.browseRouterFlag = true;
          this.$nextTick(() => {
            this.$refs.browseRouterRefs.init(row);
          });
        } else if (result.resultdata == false) {
          this.$message({
            message: "无权限查看",
            type: "warning",
          });
        }
      });
      }
    },
    selectAllEvent() {},
    selectChangeEvent() {},
    openChooseOrgTree() {
      this.$refs.dialogTree.init(null);
    },
    async onModuleChoosed(module) {
      this.treeLabel = module.label;
      this.deptIdTree = module.id;
      this.selectedNode = module;
    },
    // 重置
    resetform() {
      this.searchValue = "";
    },
    // 点击分页
    handleSizeChange({ currentPage, pageSize }) {
      this.pageSize = pageSize;
      this.currentPage = currentPage;
      //重新调用
      this.init("select");
    },
  },
};
</script>

  
  <style scoped>
.swiper-container {
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: #909399; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 15px; /* 设置按钮大小 */
}

.customRoot-icon {
  width: 20px;
  height: 16px;
  display: inline-block;
}

.customParent-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.customChildren-icon {
  width: 20px;
  height: 18px;
  display: inline-block;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0em;
  fill: currentColor;
  overflow: hidden;
}
>>> .vxe-header--column .vxe-cell--title {
  font-size: 18px;
  font-weight: normal;
  /* color:#909399; */
  font-family: "微软雅黑";
}
>>> .vxe-cell--label {
  font-size: 16px;
  font-family: "微软雅黑";
}
>>> .vxe-table--render-default .vxe-cell {
  font-size: 16px;
  font-family: "微软雅黑";
}
</style>
  